<template>
  <div>
    <Card title="导出EXCEL">
      <Row>
        <Button
          icon="md-download"
          :loading="exportLoading"
          @click="exportExcel"
        >
          导出文件
        </Button>
      </Row>
    </Card>
    <Row class="margin-top-10" style="display: block">
      <Table :columns="tableTitle" :data="tableData"></Table>
    </Row>
  </div>
</template>

<script>
import excel from "@/libs/excel";
export default {
  name: "export-excel",
  data() {
    return {
      exportLoading: false,
      tableTitle: [
        {
          title: "一级分类",
          key: "category1",
        },
        {
          title: "二级分类",
          key: "category2",
        },
        {
          title: "三级分类",
          key: "category3",
        },
      ],
      tableData: [
        {
          category1: 1,
          category2: 2,
          category3: 3,
        },
        {
          category1: 4,
          category2: 5,
          category3: 6,
        },
        {
          category1: 7,
          category2: 8,
          category3: 9,
        },
      ],
    };
  },
  methods: {
    exportExcel() {
      if (this.tableData.length) {
        this.exportLoading = true;
        const params = {
          title: ["一级分类", "二级分类", "三级分类"],
          key: ["category1", "category2", "category3"],
          data: this.tableData,
          autoWidth: true,
          filename: "分类列表",
        };
        excel.export_array_to_excel(params);
        this.exportLoading = false;
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less">
@import "./excel.less";
</style>